<template>
	<div>
		<!-- 标题区域 -->
		<van-nav-bar title="注册账号" />
		<div style="height: 45px;"></div>
		<!-- 注册 全域 -->
		<van-form @submit="onSubmit">
			<van-cell-group inset>
				<!-- 手机号 -->
				<van-field v-model="phone" name="手机号" label="手机号" placeholder="手机号" :rules="[{ pattern, message: '请填写手机号' }]" />
				<!-- 用户名 账号 -->
				<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<!-- 密码 -->
				<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
					:rules="[{ required: true, message: '请填写密码' }]" />
				<!-- 验证码-->
				<van-field v-model="yzm" name="验证码" label="验证码" placeholder="验证码"
					:rules="[{ required: true, message: '请填写验证码' }]" />
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit" style="margin-bottom: 10px;">
					注册
				</van-button>
			</div>
			<div style="margin: 16px;">
				<!-- 获取验证码按钮 -->
				<van-button round block type="primary" native-type="submit" style="margin-bottom: 10px;" @click="get"
					class="query">
					获取验证码
				</van-button>
			</div>
		</van-form>
		<!-- 已有帐号去登录页面登录 -->
		<p id="toregister" @click="tologin">已账号,去登录!</p>
	</div>
</template>
<script setup>
import { showToast } from 'vant';
import { registerApi } from '@/api/api';
import { ref } from 'vue';
import router from '@/router';
const username = ref('')
const password = ref('')
let phone = ref('')
// 手机号的正则校验
let pattern = /^1[3-9]\d{9}$/
const onSubmit = () => {
	console.log(username.value, password.value, phone.value)
	//  获取接口 拿数据
	registerApi(username.value, password.value).then(res => {
		console.log('登录信息', res);
		// 判断是否和注册的信息一致
		if (res.data.code == 0) {
			showToast({
				type: 'success',
				message: '注册成功',
				onClose() {
					router.push('/login')
				}
			})
		}
	})
}
// 已有帐号去登录页面登录
const tologin = () => {
	router.push('/login')
}
//  获取验证码
// 定时器全局变量
let time = ref(5)
// 验证码数据绑定
let yzm = ref('')
// 点击按钮
const get = () => {
	// 按钮禁用
	document.querySelector('.query').disabled = true
	// yzm输入框内容（随机数）
	yzm.value = Math.floor(Math.random() * 1000000)
	console.log(yzm.value)
	// 设置定时器
	let t1 = setInterval(() => {
		// 时间 --
		time.value--
		// 获取元素的内容 = 时间 + '秒后重新获取'
		document.querySelector('.query').innerHTML = time.value + '秒后重新获取'
		if (time.value == 0) {
			// 清除禁用
			clearInterval(t1)
			// 解除禁用
			document.querySelector('.query').disabled = false
			// 获取元素的内容 = '重新获取验证码'
			document.querySelector('.query').innerHTML = '重新获取验证码'
			// 时间结束后重新回复5秒
			time.value = 5
		}
	}, 1000)
}
</script>
<style lang="scss" scoped>
#toregister {
	float: right;
	color: blue;
	margin-right: 20px;
	font-size: 16px;
}
</style>